<div>
  <div>
    <el-alert type="success" [closable]="false">
      Welcome to here!
    </el-alert>
  </div>
  <div class="mainpagebox">
    <div class="asidemenu">
        <div>
          <el-menu model="2" class="el-menu-vertical-demo">
            <el-submenu index="1">
              <ng-template #title>
                <i class="el-icon-message"></i>导航一
              </ng-template>
              <el-menu-item-group title="分组一">
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4" title="选项4">
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"><a routerLink="/dashboard">Dashboard</a></i></el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"><a routerLink="/childtest">TestChild</a></i></el-menu-item>
          </el-menu>
        </div>
    </div>
    <div class="contextBox">
        <el-table [model]="tableData" [scroll-x]="true" center="all" [border]="true">
          <el-table-column model-key="name" label="姓名" min-width="140">
          </el-table-column>
          <el-table-column model-key="date" label="日期" min-width="140">
          </el-table-column>
          <el-table-column model-key="address" label="地址" min-width="140" [render-html]="true">
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <ng-template #slot let-scope="scope">
              <el-button type="text" size="small" (click)="handle(scope)">删除</el-button>
            </ng-template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <ng-template #slot let-scope="scope">
              <el-button type="text" size="small" (click)="handle(scope)">删除</el-button>
            </ng-template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <ng-template #slot let-scope="scope">
              <el-button type="text" size="small" (click)="dialog(scope)">弹窗</el-button>
            </ng-template>
          </el-table-column>
        </el-table>
        <!-- <div class="box-card" #card>
          <el-dialog [title]="dialogData['name']" [(visible)]="showdialog">
            <span>{{dialogData['address']}}</span>
          </el-dialog>
        </div> -->
    </div>
  </div>
  <!-- <el-main>
    <div class="toolbar" role="banner">
      <nav>
        <a routerLink="/heroes">Heroes</a><br/>
        <a routerLink="/dashboard">Dashboard</a><br/>
        <a routerLink="/childtest">childtest</a><br/>
      </nav>
    </div>
    
  </el-main> -->
  <el-button  (click)="dialogtest()">弹窗</el-button>
</div>
<div class="testbox" *ngIf="showtest">
  <div class="sbox">
    test box
    <el-button  (click)="dialogtest()">弹窗</el-button>
  </div>
</div>